<template>
    <div class="login-logo" v-if="logo!=''">
        <img :src="logo">
    </div>
    <v-form v-if="show" class-name="form-horizontal margin-bottom-20" id="login-form" :rules="rules" :messages="messages" :animate="true" :submit.sync="submit" @form:submit="login">
        <slot></slot>
        <div class="form-group" style="padding:20px;">
            <button type="submit" class="btn blue btn-block" @click="loginReady" >
                登录 <i class="m-icon-swapright m-icon-white" ></i>
            </button>
        </div>
    </v-form>

    <div v-if="!show" class="load-layout"></div>

</template>
<script>
import VForm from './form.vue'
require('../style/login.scss')

export default{
    components:{
        VForm
    },
    props:{
        logo:{
            type: String,
            default: ''
        },
        rules:{
            type:Object,
            default:function(){
                return{}
            }
        },
        messages:{
            type:Object,
            default:function(){
                return{}
            }
        },
        backstretch:{
            type:Array,
            default: function(){
                return[]
            }
        },
        submit:{
            type:Boolean,
            default: false
        }
    },
    data(){
        return{
            
            
            show: false
        }
    },
    ready(){
        this.show = true
        Metronic.init()
        $.backstretch(this.backstretch, {
                fade: 1000,
                duration: 8000
            }
        )
    },
    methods:{
        loginReady(){
            this.submit = true
        },
        login(data){
            console.log(data)

            this.$dispatch('login:submit', data)
            
        },
    }
}
</script>